<template>
  <div class="wikipedia">
    <div class="wikipedia-banner">
      <ind-header />
    </div>
    <div class="wikipedia-swiper">
      <div>
        <swiper
          ref="swiper"
          @mouseover.native="stopSwiper"
          @mouseout.native="startSwiper"
          :options="swiperOption"
        >
          <swiper-slide v-for="x in 7" :key="x.cid">
            <img src="../assets/banner02.jpg" alt="" />
          </swiper-slide>

          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <div class="wikipedia-main">
      <div>
        <h1>萌宠课堂</h1>
      </div>
      <router-link
        :to="`/article?artid=${x.artid}`"
        class="wikipedia-title"
        v-for="x in artData"
        :key="x.artid"
      >
        <div class="wikipedia-name">
          <span>{{ x.title }}</span>
          <div class="wikipedia-time">
            <span>{{ x.arttime }}</span>
            <span>{{ x.sketch }}</span>
          </div>
        </div>
      </router-link>
    </div>
    <div>
      <ind-footer />
    </div>
  </div>
</template>

<script>
import IndHeader from "@/components/IndHeader.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import IndFooter from "@/components/IndFooter.vue";
import { articleServe } from "@/utils/service/user";
export default {
  components: { IndHeader, Swiper, SwiperSlide, IndFooter },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await articleServe(this.page);
      this.artData = res.data;
      this.page++;
    },
    // 鼠标进入swiper,触发停止. 离开时触发启动自动滚动
    stopSwiper() {
      // 此层级 只能自己到后台查看
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      // alert('鼠标离开')
      this.$refs.swiper.$swiper.autoplay.start();
    },
  },
  data() {
    return {
      swiperData: [],
      artData: [],
      data: null,
      page: 1,
      swiperOption: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.wikipedia-swiper {
  margin: 10px 0;
}
.swiper-container {
  width: 80%;
  img {
    width: 100%;
  }
}
.wikipedia-main {
  h1 {
    text-align: center;
    font-size: 4em;
  }
  width: 80%;
  margin: 0 auto;
  background-color: rgb(241, 201, 201);
  padding: 20px;
  .wikipedia-title {
    width: 80%;
    margin: 10px auto 0;
    border-bottom: 1px solid #fff;
    padding: 4px;
    display: flex;
    .wikipedia-img {
      margin-right: 10px;
      img {
        width: 200px;
        height: 100px;
      }
    }
    .wikipedia-name {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .wikipedia-time {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>

<style>
.swiper-button-prev,
.swiper-button-next {
  width: 55px;
  height: 55px;
  background: url(../assets/left.png) no-repeat;
  background-size: 60px 60px;
  color: transparent;
  margin: 0 20px;
  top: 41%;
}
</style>
